import { Component, ReactNode } from "react";
import { Button, Popconfirm, Table, message, Input, Space } from "antd";
import { instance } from "../../utils/request";
import AddGood from "./AddGoods";
import EditGoods from "./EditGoods";
const { Search } = Input;
class GoodsList extends Component {
  state = {
    dataSource: [], // 添加初始化的dataSource属性
    total: 0, // 总条数
    pagenum: 1, // 当前页
    pagesize: 5, // 显示数量
    query: "", // 查询条件
    showAddGoodsDialog: false, // 是否隐藏
    showEditGoodsDialog: false, // 是否隐藏
    editData: {}, //编辑显示的商品数据
  };
  loadData = () => {
    const params = {
      pagenum: this.state.pagenum,
      pagesize: this.state.pagesize,
      query: this.state.query,
    };

    instance.get("/goods", { params }).then((res) => {
      console.log(res.data.data.goods);
      this.setState({
        dataSource: res.data.data.goods,
        total: res.data.data.total,
      });
    });
  };

  handleEdit = (record: any) => {
    console.log(record);
    // goods/:id 根据id 进行查询
    instance.get(`goods/${record}`).then((res) => {
      console.log('res返回的数据',res.data.data)
      this.setState({
        editData: res.data.data,
        showEditGoodsDialog: true,
      });
    });
  };
// 22章
  showEditDialog = (falg: any) => {
    if (falg) {
      return (
        <EditGoods
          visible={this.state.showEditGoodsDialog}
          closeModal={this.closeEditDialog}
          data={this.state.editData}
        ></EditGoods>
      );
    }
  };

  onSearch = (value: any) => {
    this.setState(
      (preState: any) => {
        preState.query = value;
      },
      () => {
        this.loadData();
      }
    );
  };

  // 分页，点击页、显示数量
  changePage = (page: number, pagesize: number) => {
    this.setState({ pagenum: page, pagesize: pagesize }, () => {
      this.loadData();
    });
  };

  handleDelete = (pid: any) => {
    instance.delete(`/goods/${pid}`).then((res) => {
      if (res.data.meta.status === 200) {
        message.success("删除成功!");
        this.loadData();
      } else {
        message.error("删除失败!");
      }
    });
  };

  // 添加商品
  handleAdd = () => {
    this.setState({ showAddGoodsDialog: true });
  };
  // 关闭添加窗口
  closeAddDialog = () => {
    this.setState({ showAddGoodsDialog: false }, () => {
      this.loadData();
    });
    // 重新进行更新刷新页面
  };
  closeEditDialog = () => {
    this.setState({ showEditGoodsDialog: false }, () => {
      this.loadData();
    });
    // 重新进行更新刷新页面
  };

  // 组件加载完挂载
  componentDidMount() {
    this.loadData();
  }

  render() {
    const columns = [
      {
        title: "商品名称",
        dataIndex: "goods_name",
        key: "goods_name",
      },
      {
        title: "商品价格",
        dataIndex: "goods_price",
        key: "goods_price",
      },
      {
        title: "商品数量",
        dataIndex: "goods_number",
        key: "goods_number",
      },
      {
        title: "商品重量",
        dataIndex: "goods_weight",
        key: "goods_weight",
      },
      {
        title: "商品图片",
        dataIndex: "goods_small_logo",
        key: "goods_small_logo",
        render: (record: any) =>
          record && (
            <img
              src={record}
              alt="Product image"
              style={{ width: "100px", height: "100px" }}
            />
          ),
      },
      {
        title: "操作",
        dataIndex: "goods_id",
        key: "goods_id",
        render: (record: any) => (
          <>
            <Button
              onClick={() => {
                this.handleEdit(record);
              }}
              style={{ marginRight: "10px" }}
            >
              编辑
            </Button>
            <Popconfirm
              okText="确认"
              cancelText="取消"
              title="你确认要删除该记录嘛?"
              onConfirm={() => {
                this.handleDelete(record);
              }}
            >
              <Button type="primary">删除</Button>
            </Popconfirm>
          </>
        ),
      },
    ];
    return (
      <div>
        <Search
          style={{ width: 400, marginBottom: 20, marginTop: 10 }}
          placeholder="请输入商品名称"
          onSearch={this.onSearch}
          size="large"
          allowClear
          enterButton
        />
        <Button
          style={{ marginTop: "7px", marginLeft: "10px" }}
          onClick={this.handleAdd}
          size="large"
          type="primary"
        >
          添加商品
        </Button>

        <Table
          dataSource={this.state.dataSource}
          columns={columns}
          rowKey="goods_id"
          pagination={{
            pageSize: this.state.pagesize,
            defaultCurrent: this.state.pagenum,
            onChange: this.changePage,
            total: this.state.total,
          }}
        />
        <AddGood
          close={this.closeAddDialog}
          visible={this.state.showAddGoodsDialog}
        />
        {/*  当点击编辑的时候会变成true，发送异步请求后，展示 */}
        {this.showEditDialog(this.state.showEditGoodsDialog)}
      </div>
    );
  }
}

export default GoodsList;
